<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="UP" name="UP" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
    <title>Resource Saver Extension</title>
    <style>
      @-webkit-keyframes borderPreload {
        from {
          border-radius: 20%;
        }

        to {
          border-radius: 40%;
        }
      }

      @-moz-keyframes borderPreload {
        from {
          border-radius: 20%;
        }

        to {
          border-radius: 40%;
        }
      }

      @-o-keyframes borderPreload {
        from {
          border-radius: 20%;
        }

        to {
          border-radius: 40%;
        }
      }

      @keyframes borderPreload {
        from {
          border-radius: 20%;
        }

        to {
          border-radius: 40%;
        }
      }

      html,
      body {
        overflow: hidden;
      }

      #preload {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
        -webkit-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        pointer-events: none;
        background-color: white;
        opacity: 1;
        display: none;
      }

      #preload[data-light] {
        display: block;
        background-color: white;
      }

      #preload[data-dark] {
        display: block;
        background-color: #333;
      }

      #preload[data-hidden] {
        opacity: 0;
      }

      #preload::before {
        box-sizing: border-box;
        content: '';
        z-index: 99999;
        width: 48px;
        height: 48px;
        display: block;
        top: 50%;
        left: 50%;
        position: fixed;
        border: 1px solid #999999;
        border-radius: 15%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        animation: borderPreload 0.5s both cubic-bezier(0.69, 0.22, 0.44, 0.91) alternate infinite;
      }

      #preload::after {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 1rem;
        font-weight: normal;
        line-height: 1.5;
        margin-top: -3px;
        color: #999999;
        text-align: center;
        box-sizing: border-box;
        content: '...';
        position: fixed;
        z-index: 99999;
        display: block;
        width: 20px;
        height: 20px;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }

      #preload[data-dark]::after {
        color: #eeeeee;
      }
    </style>
    <link href="./static/fonts/styles.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div id="root"></div>
    <div id="preload"></div>
    <script src="./static/vendors/index.js"></script>
    <script src="./devtool.app.init.js"></script>
    <script type="module" src="./devtool.app.js"></script>
  </body>
</html>
